<div class="banner" >
    <div class="bannerCon">
        <ul class="imgList">
            <li ng-repeat="item in data"><a href="{{item.url}}"><img src="{{item.logo}}" alt=""/></a></li>
            <li><a href="{{data[0].url}}"><img src="{{data[0].logo}}" alt=""/></a></li>
        </ul>
        <ul class="btnList clearfix">
            <li ng-class={'cur':$first} ng-click="hoverDot($index)" ng-repeat="item in data"><span></span></li>
        </ul>
        <span class="pre-nex prev" ng-click="dirction('pre')" ng-if="flag">&lt;</span>
        <span class="pre-nex next" ng-click="dirction('next')" ng-if="flag">&gt;</span>
    </div>
</div>
<style>
    .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    /* 具体样式 */
    .banner {
        position: relative;
        height: 302px;
        overflow: hidden;
    }
    .banner .bannerCon {
        position: absolute;
        top: 0;
        left: 50%;
        width: 750px;
        height: 300px;
        margin-left: -378px;
        overflow: hidden;
    }
    .bannerCon .imgList {
        position: absolute;
        top: 0;
        left: 0;
        width: 99999px;
        height: 302px;
    }
    .bannerCon .imgList li {
        float: left;
        width: 750px;
        height: 300px;
    }
    .bannerCon .imgList li a {
        position: relative;
        display: block;
        height: 100%;
    }
    .bannerCon .imgList li img {
        width: 750px;
        height: 300px;
    }
    .bannerCon .pre-nex {
        position: absolute;
        top: 50%;
        width: 40px;
        height: 60px;
        margin-top: -40px;
        font: bold 40px/60px Simsun;
        color: #ccc;
        text-align: center;
        border:none;
        background: rgba(0,0,0,.30);
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);
        cursor: pointer;
        z-index: 3;
    }
    .bannerCon .pre-nex.show { display: inline-block; }
    .bannerCon .prev { left: 20px; }
    .bannerCon .next { right: 20px; }
    .bannerCon .btnList {
        position: absolute;
        bottom: 20px;
        width: 100%;
        height: 12px;
        text-align:center;
        z-index: 2;
        _overflow: hidden;
    }
    .bannerCon .btnList li { display: inline; }
    .bannerCon .btnList li span {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 0 5px;
        background-color:#dddddd;
        cursor: pointer;
    }
    .bannerCon .btnList li.cur span {
    	-webkit-animation:move 0.5s linear;
    	-o-animation:move 0.5s ;
    	animation: move 0.5s ;
        position: relative;
        top:3px;
        width:19px;
        height:19px;
        background:url("them/imgs/bannerIcon.png") no-repeat;
    }
    
    @-webkit-keyframes move {
    	from { transform:rotateZ(0);
		    	-ms-transform:rotateZ(0); 	
				-moz-transform:rotateZ(0); 	
				-webkit-transform:rotateZ(0); 
				-o-transform:rotateZ(0); 	
				}
    	to { 
    		transform:rotateZ(360deg);
    		-ms-transform:rotateZ(360deg); 	
			-moz-transform:rotateZ(360deg); 	
			-webkit-transform:rotateZ(360deg); 
			-o-transform:rotateZ(360deg); 	
    		}
    }
    @-o-keyframes move {
    	from { transform:rotateZ(0);
		    	-ms-transform:rotateZ(0); 	
				-moz-transform:rotateZ(0); 	
				-webkit-transform:rotateZ(0); 
				-o-transform:rotateZ(0); 	
				}
    	to { 
    		transform:rotateZ(360deg);
    		-ms-transform:rotateZ(360deg); 	
			-moz-transform:rotateZ(360deg); 	
			-webkit-transform:rotateZ(360deg); 
			-o-transform:rotateZ(360deg); 	
    		}
    }
    @-moz-keyframes move {
    	from { transform:rotateZ(0);
		    	-ms-transform:rotateZ(0); 	
				-moz-transform:rotateZ(0); 	
				-webkit-transform:rotateZ(0); 
				-o-transform:rotateZ(0); 	
				}
    	to { 
    		transform:rotateZ(360deg);
    		-ms-transform:rotateZ(360deg); 	
			-moz-transform:rotateZ(360deg); 	
			-webkit-transform:rotateZ(360deg); 
			-o-transform:rotateZ(360deg); 	
    		}
    }
    @keyframes move {
    	from { transform:rotateZ(0);
		    	-ms-transform:rotateZ(0); 	
				-moz-transform:rotateZ(0); 	
				-webkit-transform:rotateZ(0); 
				-o-transform:rotateZ(0); 	
				}
    	to { 
    		transform:rotateZ(360deg);
    		-ms-transform:rotateZ(360deg); 	
			-moz-transform:rotateZ(360deg); 	
			-webkit-transform:rotateZ(360deg); 
			-o-transform:rotateZ(360deg); 	
    		}
    }
    
    
    
    
</style>